<template>
  <div class="col-md-10" id="userListBox">
    <div
      class="modal fade editUserInfo"
      id="editModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="editModalLabel"
      aria-hidden="true"
      data-backdrop="static"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="editModalLabel">修改用户信息</h4>
          </div>
          <form accept-charset="utf-8">
            <div class="modal-body">
              <div class="input-group">
                <span class="input-group-addon">用户ID：</span>
                <input
                  type="text"
                  readonly
                  class="form-control"
                  v-model="editData.editId"
                  name="editId"
                >
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">用户名：</span>
                <input type="text" class="form-control" v-model="editData.editName" name="editName">
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">密&nbsp;&nbsp;&nbsp;码：</span>
                <input
                  type="text"
                  class="form-control"
                  v-model="editData.editPasswd"
                  name="editPasswd"
                >
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">电&nbsp;&nbsp;&nbsp;话：</span>
                <input type="text" class="form-control" v-model="editData.editTel" name="editTel">
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">地&nbsp;&nbsp;&nbsp;址：</span>
                <input type="text" class="form-control" v-model="editData.editAddr" name="editAddr">
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">生&nbsp;&nbsp;&nbsp;日：</span>
                <input
                  type="date"
                  class="form-control"
                  v-model="editData.editBirthday"
                  name="editBirthday"
                >
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">性&nbsp;&nbsp;&nbsp;别：</span>
                <label>
                  男
                  <input type="radio" name="editSex" value="男" v-model="editData.editSex">
                </label>
                <label>
                  女
                  <input type="radio" name="editSex" value="女" v-model="editData.editSex">
                </label>
              </div>
            </div>
          </form>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-default editBtn" v-on:click="editSubmit()">提交</button>
          </div>
        </div>
      </div>
    </div>

    <div
      class="modal fade addUserInfo"
      id="addModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="addModalLabel"
      aria-hidden="true"
      data-backdrop="static"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="addodalLabel">添加用户信息</h4>
          </div>
          <form accept-charset="utf-8" id="addForm">
            <div class="modal-body">
              <div class="input-group">
                <span class="input-group-addon">用户名：</span>
                <input type="text" class="form-control" v-model="addData.addName" name="addName">
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">密&nbsp;&nbsp;&nbsp;码：</span>
                <input
                  type="text"
                  class="form-control"
                  v-model="addData.addPasswd"
                  name="addPasswd"
                >
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">手&nbsp;&nbsp;&nbsp;机：</span>
                <input
                  type="text"
                  class="form-control"
                  v-model="addData.addTel"
                  name="addTel"
                  maxlength="11"
                >
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">地&nbsp;&nbsp;&nbsp;址：</span>
                <input type="text" class="form-control" v-model="addData.addAddr" name="addAddr">
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">生&nbsp;&nbsp;&nbsp;日：</span>
                <input
                  type="date"
                  class="form-control"
                  v-model="addData.addBirthday"
                  name="addBirthday"
                  max="maxBirth"
                >
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">性&nbsp;&nbsp;&nbsp;别：</span>
                <label>
                  男
                  <input type="radio" v-model="addData.addSex" name="addSex" value="男">
                </label>
                <label>
                  女
                  <input type="radio" v-model="addData.addSex" name="addSex" value="女">
                </label>
              </div>
            </div>
          </form>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button
              type="button"
              class="btn btn-default delBtn"
              id="addSubmit"
              v-on:click="addSubmit()"
            >添加</button>
          </div>
        </div>
      </div>
    </div>

    <div class="tabList">
      <div class="searchBox">
        <input
          type="text"
          placeholder="请输入要查找的用户名"
          v-model="pageList.searchVal"
          @keyup.enter="getSearchUser()"
          class="search"
        >
        <button class="searchBtn" v-on:click="getSearchUser()">查找</button>
      </div>
      <table class="table table-bordered table-striped table-hover" align="center" id="myTab">
        <thead align="center">
          <tr>
            <th width="5%">ID</th>
            <th width="10%">电话</th>
            <th width="10%">用户名</th>
            <th width="10%">密码</th>
            <th width="20%">地址</th>
            <th width="10%">性别</th>
            <th width="20%">生日</th>
            <th width="15%" colspan="3">操作</th>
          </tr>
        </thead>
        <tbody id="tb" align="center">
          <tr v-for="trData in pageList.pageData">
            <!-- <td v-for="td in trData">{{td}}</td> -->
            <td>{{trData.id}}</td>
            <td>{{trData.tel}}</td>
            <td>{{trData.username}}</td>
            <td>{{trData.passwd}}</td>
            <td>{{trData.addr}}</td>
            <td>{{trData.gender}}</td>
            <td>{{trData.birthday}}</td>
            <td>
              <b class="edit btn" data-target="#editModal" v-on:click="t_edit(trData)">修改</b>
            </td>
            <td>
              <b class="add btn" data-target="#addModal" v-on:click="t_add(trData)">添加</b>
            </td>
            <td>
              <b class="del btn" data-target="#delModal" v-on:click="t_del(trData.id)">删除</b>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="t_tool">
        <span class="iconfont icon-fenye-diyiye first" v-on:click="first()">&lt;&lt;</span>
        <span class="iconfont icon-fenye-shangyiye pre" v-on:click="pre()">&lt;</span>
        <input class="nowPage" type="text" disabled v-model="pageList.curPage">
        <span class="iconfont icon-fenye-xiayiye next" v-on:click="next()">&gt;</span>
        <span class="iconfont icon-fenye-zuihouyiye last" v-on:click="last()">&gt;&gt;</span>
        <span>共</span>
        <span class="allPage">{{pageList.allPage}}</span>
        <span>页</span>
        <span class="allCount">{{pageList.allCount}}</span>
        <span>条数据</span>
        <input class="toPage" type="text" v-model="pageList.toPageNum" name>
        <button class="toBtn" v-on:click="toPage()">跳转</button>
      </div>
    </div>
  </div>
</template>

<style>
@import "../assets/css/userSelect.css";
</style>

<script>
export default {
  data() {
    return {
      maxBirth: "1900-01-01",
      pageList: {
        page: 1,
        allCount: 0,
        curPage: 1,
        allPage: 1,
        count: 10,
        searchVal: "",
        toPageNum: 1,
        pageData: {}
      },
      editData: {
        editId: "",
        editName: "",
        editPasswd: "",
        editTel: "",
        editAddr: "",
        editBirthday: "",
        editSex: "男"
      },
      addData: {
        addId: "",
        addName: "",
        addPasswd: "",
        addTel: "",
        addAddr: "",
        addBirthday: "1900-01-01",
        addSex: "男"
      }
    };
  },
  mounted() {
    // let searchVal =
    let that = this;
    getSearchUser(
      that.pageList.searchVal || "",
      that.pageList.page,
      that.pageList.count
    );

    function getSearchUser(searchVal, page, count) {
      console.log("--", searchVal, page, count);
      $.ajax({
        url: "http://127.0.0.1:8080/linkMan/linkman/selectByPage",
        method: "post",
        dataType: "json",
        async: true,
        data: {
          searchVal: searchVal,
          pageNum: page,
          count: count
        },
        success: function(res) {
          console.log("allCount: ", res);
          that.pageList.pageData = res.data;
          that.pageList.allCount = res.count;
          that.pageList.allPage = Math.ceil(res.count / count);
        },
        error: function(error) {}
      });
    }
  },
  methods: {
    addSubmit() {
      var that = this;
      let data = {
        id: that.addData.addId,
        username: that.addData.addName,
        passwd: that.addData.addPasswd,
        addr: that.addData.addAddr,
        gender: that.addData.addSex,
        tel: that.addData.addTel,
        birthday: that.addData.addBirthday
      };
      var url = "http://127.0.0.1:8080/linkMan/linkman/addUser";
      console.log("data:", data);
      that.operationUser(data, url);
      that.getSearchUser(
        that.pageList.searchVal || "",
        that.pageList.page,
        that.pageList.count
      );
      $("#addModal").modal("hide");
    },
    editSubmit() {
      var that = this;
      let data = {
        id: that.editData.editId,
        username: that.editData.editName,
        passwd: that.editData.editPasswd,
        addr: that.editData.editAddr,
        gender: that.editData.editSex,
        tel: that.editData.editTel,
        birthday: that.editData.editBirthday
      };
      var url = "http://127.0.0.1:8080/linkMan/linkman/updateUser";
      console.log("data:", data);
      that.operationUser(data, url);
      that.getSearchUser(
        that.pageList.searchVal || "",
        that.pageList.page,
        that.pageList.count
      );
      $("#editModal").modal("hide");
    },
    first() {
      var that = this;
      this.pageList.curPage = 1;
      this.getSearchUser(that.pageList.searchVal || "", 1, that.pageList.count);
    },
    pre() {
      var that = this;
      // let page = this.pageList.allCount - 1;
      if (this.pageList.curPage > 1) {
        this.pageList.curPage--;
        // that.pageList.curPage = this.pageList.curPage;
        this.getSearchUser(
          that.pageList.searchVal || "",
          that.pageList.page,
          that.pageList.count
        );
      } else {
        alert("已经是第一页了！！!");
        that.curPage = 1;
        return;
      }
    },
    next() {
      var that = this;
      if (this.pageList.curPage < this.pageList.allPage) {
        this.pageList.curPage++;
        this.getSearchUser(
          that.pageList.searchVal || "",
          that.pageList.curPage,
          that.pageList.count
        );
      } else {
        alert("没有更多了！！！");
        return;
      }
    },
    last() {
      var that = this;
      this.pageList.curPage = this.pageList.allPage;
      this.getSearchUser(
        that.pageList.searchVal || "",
        that.pageList.allPage,
        that.pageList.count
      );
    },
    toPage() {
      var that = this;
      if (this.pageList.toPageNum > this.pageList.allPage) {
        alert("只有 " + that.pageList.allPage + " 页");
        return;
      } else {
        this.pageList.curPage = this.pageList.toPageNum;
        this.getSearchUser(
          that.pageList.searchVal || "",
          that.pageList.toPageNum,
          that.pageList.count
        );
      }
    },
    t_edit(item) {
      let that = this;
      console.log(item);
      $("#editModal").modal("show");
      that.editData.editId = item.id;
      that.editData.editName = item.username;
      that.editData.editPasswd = item.passwd;
      that.editData.editTel = item.tel;
      that.editData.editAddr = item.addr;
      that.editData.editBirthday = item.birthday;
      that.editData.editSex = item.gender;
    },
    t_add(item) {
      // let that = this;
      console.log(item);
      this.initDate();
      $("#addModal").modal("show");
    },
    t_del(item) {
      let that = this;
      console.log(item);
      this.delUser(item);
      this.getSearchUser(
        that.pageList.searchVal || "",
        that.pageList.curPage,
        that.pageList.count
      );
    },
    operationUser: function(data, url) {
      $.ajax({
        url: url,
        method: "post",
        dataType: "json",
        async: false,
        data: data,
        success: function(res) {
          console.log("post res: ", res);
          alert(res.msg);
        },
        error: function(error) {
          console.log("post error: ", error);
        }
      });
    },
    initDate: function() {
      var date_now = new Date();
      var year = date_now.getFullYear();
      var month =
        date_now.getMonth() + 1 < 10
          ? "0" + (date_now.getMonth() + 1)
          : date_now.getMonth() + 1;
      var date =
        date_now.getDate() < 10 ? "0" + date_now.getDate() : date_now.getDate();
      var disDate = year + "-" + month + "-" + date;
      this.maxBirth = disDate;
      this.addData.addBirthday = disDate;
    },
    getSearchUser: function() {
      var that = this;
      // console.log("--", searchVal, page, count);
      $.ajax({
        url: "http://127.0.0.1:8080/linkMan/linkman/selectByPage",
        method: "post",
        dataType: "json",
        data: {
          searchVal: that.pageList.searchVal || "",
          pageNum: that.pageList.curPage,
          count: that.pageList.count
        },
        success: function(res) {
          console.log("res: ", res);
          that.pageList.pageData = res.data;
          that.pageList.allCount = res.count;
          that.pageList.allPage = Math.ceil(res.count / that.pageList.count);
        },
        error: function(error) {}
      });
    },
    delUser: function(userid) {
      $.ajax({
        url: "http://127.0.0.1:8080/linkMan/linkman/delUser",
        method: "post",
        dataType: "json",
        async: false,
        data: {
          id: userid
        },
        success: function(res) {
          // alert(res.msg);
          console.log("post res: ", res);
        },
        error: function(error) {
          console.log("post error: ", error);
        }
      });
    }
  },
  getAllPage: function() {
    $.ajax({
      url: "http://127.0.0.1:8080/friend/webuser/getAllPageCount",
      method: "post",
      dataType: "json",
      success: function(res) {
        console.log("allCount: ", res);
        allCount = res.pageCount;
        allPage = Math.ceil(allCount / count);
        $(".allCount").text(allCount);
        $(".allPage").text(allPage);
      },
      error: function(error) {
        console.log("error: ", error);
      }
    });
  }
};
</script>
